<!DOCTYPE html><!--添加商品-->
<html lang="en" xmlns:th="http://www.thymeleaf.org" class="x-admin-sm">
<head th:replace="common/amazingHeader2::amazing_header('添加商品')">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form" id="fileForm" enctype="multipart/form-data">
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>商品名
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="name" name="name" required="required" lay-verify="name"
                           autocomplete="off" class="layui-input" onblur="chName(this)">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red" id="nameMsg"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="detail" class="layui-form-label">
                    <span class="x-red">*</span>细节描述
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="detail" name="detail" required="required"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="file" class="layui-form-label">
                    <span class="x-red">*</span>主图
                </label>
                <div class="layui-input-inline">
                    <input type="file" id="file" name="img" required="required"
                           autocomplete="off" class="layui-input" onchange="chFile()">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red" id="imgMsg"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="price" class="layui-form-label">
                    <span class="x-red">*</span>价格
                </label>
                <div class="layui-input-inline">
                    <input type="number" id="price" name="price" required="required"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red"></span>
                </div>
            </div>
            <div id="hid">

            </div>
            <div class="layui-form-item">
                <label for="stock" class="layui-form-label">
                    <span class="x-red">*</span>库存
                </label>
                <div class="layui-input-inline">
                    <input type="number" id="stock" name="stock" required="required"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="status"><span class="x-red">*</span>状态</label>
                <div class="layui-input-block" style="width: 17%">
                    <select id="status" class="layui-form-select" name="status">
                        <option value="1">在售</option>
                        <option value="2">下架</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                </label>
                <button class="layui-btn" type="button" onclick="sub()">
                    增加
                </button>
            </div>
        </form>
    </div>
</div>
<script>
    const id = window.location.href.split('?')[1].split('=')[1];
    const body = $("#hid");
    body.append("<input type='hidden' name='categoryId' value='" + id + "'> ");


    let nameFlag = false;
    let imgFlag = false;

    function chName() {
        const val = $("#name").val();
        if (val.length > 10) {
            $("#nameMsg").text("名称长度不能大于10");
            nameFlag = false;
        } else if (val.length < 1) {
            $("#nameMsg").text("名称长度不能为空");
            nameFlag = false;
        } else {
            $("#nameMsg").text('');
            nameFlag = true;
        }
    }

    function chFile() {
        const val = $("#file").val();
        const index = val.lastIndexOf('.');
        const sub = val.substring(index + 1);
        if ('jpg' === sub || 'png' === sub || 'ico' === sub||'PNG' === sub) {
            $("#imgMsg").text('');
            imgFlag = true;
        } else {
            $("#imgMsg").text('请上传图片格式文件');
            imgFlag = false;
        }
    }

    function sub() {
        if (imgFlag === false || nameFlag === false) {
            layer.msg('请检查你输入的内容', {time: 1500, icon: 5, shift: 6});
        } else {
            const formData = new FormData($("#fileForm")[0]);
            $.ajax({
                type: "POST",
                url: 'pro/addPro',
                data: formData,
                cache: false,           // 不缓存
                processData: false,     // jQuery不要去处理发送的数据
                contentType: false,     // jQuery不要去设置Content-Type请求头
                beforeSend: function () {
                    loading = layer.msg('处理中', {icon: 16});
                },
                success: function (result) {
                    layer.close(loading);

                }
            });
            layer.msg("添加成功", {time: 1500, icon: 6}, function () {
            });
            setTimeout(xadmin.close, 500);
        }
    }
</script>
<script>layui.use(['form', 'layer'],
    function () {
        $ = layui.jquery;
        form = layui.form,
            layer = layui.layer;

        //自定义验证规则
        form.verify({
            name: function (value) {
                if (value.length < 5) {
                    return '昵称至少得5个字符啊';
                }
            },
            pass: [/(.+){6,12}$/, '密码必须6到12位'],
            repass: function (value) {
                if ($('#L_pass').val() != $('#L_repass').val()) {
                    return '两次密码不一致';
                }
            }
        });

        //监听提交
        form.on('submit(add)',
            function (data) {
                console.log(data);
                //发异步，把数据提交给php
                layer.alert("增加成功", {
                        icon: 6
                    },
                    function () {
                        //关闭当前frame
                        xadmin.close();

                        // 可以对父窗口进行刷新
                        xadmin.father_reload();
                    });
                return false;
            });

    });</script>
<script>var _hmt = _hmt || [];
(function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();</script>
</body>

</html>